<template>
  <div style="width: 100%; padding: 10px">
    <div class="head">
      <p></p>
      {{
        type === 1 ? '产线派工信息' : type === 2 ? '设备任务单' : '工位任务单'
      }}
    </div>
    <p style="font-size: 12px; margin-left: 10px"
      >{{ type === 1 ? '产线名称' : type === 2 ? '设备名称' : '工位名称' }}:{{
        name ? name : '暂无'
      }}</p
    >
    <a-table style="width: 100%" :columns="columns" :data="data"></a-table>
  </div>
</template>

<script lang="ts" setup>
  import { GetTaskPage } from '@/api/produce-management/produce-list/index';
  import dayjs from 'dayjs';
  import { reactive, ref } from 'vue';
  import pageHeader from '@/components/page-header/index.vue';
  import { useRouter } from 'vue-router';
  import { Message } from '@arco-design/web-vue';

  const props = withDefaults(
    // 参数说明
    defineProps<{
      type: number;
      data: any;
      name: string;
    }>(),
    {
      data: [],
    }
  );
  const columns = [
    {
      title: '派工编号',
      dataIndex: 'materialName',
      slotName: 'materialName',
    },
    {
      title: '进度',
      dataIndex: 'number',
      slotName: 'number',
    },
    {
      title: '任务开始时间',
      dataIndex: 'name',
      slotName: 'name',
    },
    {
      title: '任务结束时间',
      dataIndex: 'spec',
      slotName: 'spec',
    },
    {
      title: '任务时长',
      dataIndex: 'basicName',
      slotName: 'basicName',
    },
    {
      title: '创建时间',
      dataIndex: 'amount',
      slotName: 'amount',
    },
  ];
</script>

<style scoped lang="less">
  .head {
    margin-top: 20px;
    display: flex;
    align-items: center;
    p {
      margin: 0;
      padding: 0;
      background-color: #3d7eff;
      width: 5px;
      height: 18px;
      margin-right: 5px !important;
      border-radius: 5px;
    }
  }
</style>
